<nav class="navbar is-primary is-fixed-top is-transparent" x-data="{ open: false }">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item" href="{{ site.BaseURL }}">
        <img src="/img/logos/{{ site.Params.logos.navbar }}" alt="{{ site.Title }} navbar logo">
      </a>

      <div role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu" @click="open = !open" :class="{ 'is-active': open }">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </div>
    </div>

    <div class="navbar-menu" id="navbar-menu" :class="{ 'is-active': open }">
      <div class="navbar-end">
        {{ partial "navbar-menu.html" . }}

        {{ partial "search-bar.html" . }}

        <div class="navbar-item">
          {{ partial "social-buttons.html" (dict "expanded" false) }}
        </div>
      </div>
    </div>
  </div>
</nav>